<template>
  <div class="vue-box" style="display: none;" :style="'display: block;'">

    <el-dialog v-bind="$attrs"
               :visible.sync="dialogVisible"
               :append-to-body="true"
               :close-on-click-modal="false"
               v-on="$listeners" @open="onOpen" @close="onClose" title="修改密码">
      <el-form ref="elForm" :model="formData" :rules="rules" size="small" label-width="100px">
        <el-form-item label="原密码" prop="oldPas">
          <el-input v-model="formData.oldPas" placeholder="请输入原密码" clearable show-password
                    :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPas">
          <el-input v-model="formData.newPas" placeholder="请输入新密码" clearable show-password
                    :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="再输一次" prop="newPas2">
          <el-input v-model="formData.newPas2" placeholder="请输入再输一次" clearable show-password
                    :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
    <div class="c-panel">
      <!-- ------------- 检索参数 ------------- -->
      <!-- ------------- 快捷按钮 ------------- -->
      <el-row :gutter="15">
        <el-col :span="6">
          <el-card>
            <div style="display: flex;flex-direction: column;align-items: center;">
              <div>
                <el-avatar v-if="showData.avatar" :src="avatar" :size="80"></el-avatar>
                <el-avatar v-else src="" :size="80"></el-avatar>
              </div>
              <div>
                <el-link type="primary" @click="changeAvatar">更换头像</el-link>
                <el-link type="danger" @click="dialogVisible = true">修改密码</el-link>
              </div>
            </div>
            <el-descriptions size="medium" :column="1">
              <el-descriptions-item label="用户名">
                {{ showData.name }}
              </el-descriptions-item>
              <el-descriptions-item label="登录帐号">
                {{ showData.loginNo }}
              </el-descriptions-item>
              <el-descriptions-item label="手机号">{{ showData.phone }}</el-descriptions-item>
              <el-descriptions-item label="性别">
                <el-tag v-if="showData.sex === 0">男</el-tag>
                <el-tag v-if="showData.sex === 1">女</el-tag>
                <el-tag v-if="showData.sex === 2">未知</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="备注">
                {{ showData.remark }}
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>
        <el-col :span="18">
          <el-card>

          </el-card>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
let PATH = "/user"
module.exports = {
  components: {},
  computed: {
    avatar: function () {
      return sa.getImgPath(this.showData.avatar);
    },
  },
  watch: {},
  data() {
    return {
      dialogVisible: false,

      formData: {
        oldPas: "",
        newPas: undefined,
        newPas2: undefined,
      },
      rules: {
        oldPas: [{
          required: true,
          message: '请输入原密码',
          trigger: 'blur'
        }],
        newPas: [{
          required: true,
          message: '请输入新密码',
          trigger: 'blur'
        }],
        newPas2: [{
          required: true,
          validator: this.checkPas,
          trigger: 'blur'
        }],
      },
      showData: {
        id: undefined,
        name: undefined,
        avatar: undefined,
        loginNo: '',
        phone: undefined,
        userType: 0,
        sex: 0,
        status: true,
        roleIds: [],
        remark: undefined,
        loginEndTime: '',
        roleList: [],
        permissionList: []
      }
    }
  },

  methods: {
    checkPas(rule, value, callback) {
      if (!value) {
        return callback(new Error('密码不能为空'))
      }
      setTimeout(() => {
        if (this.formData.newPas !== value) {
          callback(new Error('两次输入的密码不一致！'))
        } else {
          callback()
        }
      }, 100)
    },
    onOpen() {
    },
    onClose() {
      this.$refs['elForm'].resetFields()
    },
    close() {
      this.dialogVisible = false;
    },
    handelConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        sa.ajax(PATH + '/change-pas', this.formData, (res) => {
          sa.alert(res.msg, () => {
            window.open("login.html", '_self')
          })
        }, {type: 'get'})
        this.close()
      })
    },
    changeAvatar() {
      sa.uploadFn(sa.cfg.api_url + PATH + '/plus-avatar', (res) => {
        this.f5()
      })
    },
    show(path) {
      sa.showImage(sa.getImgPath(path), '500px', '500px')
    },
    f5() {
      sa.ajax(PATH + '/get-login', {}, (res) => {
        this.showData = res.data
        sa_admin.user.avatar = this.avatar
      }, {type: 'get'})
    }
  },
  mounted() {

  },
  created() {
    this.f5()
  }
}
</script>

<style scoped>
</style>
